<!DOCTYPE html>
<html><head>
	<link type="text/css" rel="stylesheet" href="./jgraduate/css/jgraduate.css"/>
	<link type="text/css" rel="stylesheet" href="./jgraduate/css/jPicker.css"/>
	<style type="text/css">
		#grad_picker { display: none; }
		.button {
			border: solid 1px darkgrey;
			background-color: white;
			width: 50px; height: 50px;
			cursor: pointer;
		}
	</style>
	<script type="text/javascript" src="./jgraduate/jquery.js"></script>
	<script type="text/javascript" src="./jgraduate/jpicker.min.js"></script>
	<script type="text/javascript" src="./jgraduate/jquery.jgraduate.js"></script>
	<script type="text/javascript">
	$(function() {
		var launchPicker = function(elem, paint) {
			var pos = elem.position();
			$('#gradPicker').css({'left': '0px', 'top': '0px'}).jGraduate(
				{
					paint: paint,
					window: { pickerTitle: "Pick a paint for the demo", },
				},
				function(p) {
          const triggerEvent = new CustomEvent('colorpicker',
          {
            detail: {
              color:p.solidColor
            }
          })
          window.parent.dispatchEvent(triggerEvent)
				},
				function(p) {});
		};
    let solidColor = ''
    window.addEventListener('message', function (e) {
      solidColor = e.data
      $('#button1').click();
    })
		$('#button1').click(function() {
			var paint = new $.jGraduate.Paint();
			var alpha =  100;
			fill = "";
			var grad = document.getElementById("grad")
			if (fill == "url(#grad)" && grad.tagName == "linearGradient") {
				paint = new $.jGraduate.Paint({alpha: alpha, linearGradient: grad});
			} else if(fill == "url(#grad)" && grad.tagName == "radialGradient") {
				paint = new $.jGraduate.Paint({alpha: alpha, radialGradient: grad});
			} else {
				paint = new $.jGraduate.Paint({alpha: alpha, solidColor: solidColor});
			}
			launchPicker($(this), paint);
		});
	});
	</script>
	<title>jGraduate Test Page</title>
</head><body>
	<div id="gradPicker"></div>
	<div id="button1" class="button"></div>
</body></html>
